<template>
  <div class="recommend">
    <CarD></CarD>
    <ul>
        <li
        v-for="(item,index) in recommendList" :key="index"
        >
            <h2>
                <img :src="item.imgUrl" alt="">
            </h2>
            <div>
                <h3>{{item.name}}</h3>
                <p>{{item.content}}</p>
                <div class="price">
                    <span>$</span>   
                    <b>{{item.price}}</b>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import CarD from '@/components/home/CarD.vue'
export default {
    components:{
        CarD,
    },
    props:{
            recommendList :Array,
        },
    
}
</script>

<style scoped>
.recommend ul li{
    position: relative;
}
.recommend ul li
.recommend ul li img{
    width: 9.6rem;
    height: 3.84;
    border-radius: 12px;
}
.recommend ul li > div{
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
}
.recommend ul li > div h3{
    font-size: 12px;
}
.recommend ul li > div p{
    font-size: 0.42666rem;
}
.price{
    text-align: right;
    margin-top: 0.66666em;
    color: red;
}
.price span{
    font-size: 0.37777rem;
}
</style>